import React, { Component } from 'react';
import { Table, Dialog, Button, Icon, DatePicker } from '@alifd/theme-ds-jxc';
import { withRouter } from 'react-router-dom';
import IceContainer from '@icedesign/container';
import BalloonConfirm from '@icedesign/balloon-confirm';
import PageHead from '../../../../components/PageHead';
import Cell from '../../../../components/EditableCell';
import './index.scss';

@withRouter
export default class Bill extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      dataSource: [],
    };
  }
  componentWillReceiveProps(nextProps) {
    const data = [];
    if (nextProps.headerData && (nextProps.glassData)) {
      // console.log(nextProps.glassData);
      const headerData = nextProps.headerData;
      headerData.children = nextProps.glassData;
      data.push(headerData);
      this.setState(
        {
          dataSource: data,
        }, () => {
          // console.log(nextProps.glassData);
        }
      );
    }
  }
  groupHeaderRender = (record) => {
    // console.log(record);
    if (record.children.length !== 0 && this.state.dataSource !== []) {
      const str = `${record.w_name}店/${record.uname}/${record.s_name}/${record.add_time}`;
      return <div>{str}</div>;
    }
  };
  onConfirm= (index) => {
    this.props.handleDel(index);
  }
  handleBlur = (valueKey, value, index) => {
    // console.log(valueKey, value, index)
    this.props.handleBillChange(valueKey, value, index);
  }
  changeDutime = (valueKey, dataKey, value) => {
    // console.log(valueKey,dataKey,value);
    if (value) {
      value = new Date(value).toLocaleDateString();
    }
    const index = dataKey;
    this.props.handleBillChange(valueKey, value, index);
  }
  renderCell = (valueKey, value, index, record) => {
    return <Cell defaultTitle={value} valueKey={valueKey} index={record.key} Blur={this.handleBlur.bind(this, valueKey)} />;
  }
  // 到期日期
  renderTime = (valueKey, value, index, record) => {
    // console.log(valueKey, value, index, record)
    const dataKey = record.key;
    return (
      <DatePicker style={{ width: '100%' }} valueKey={valueKey} key={record.key} onChange={this.changeDutime.bind(this, valueKey, dataKey)} />
    );
  }
  renderOper = (value, index, record) => {
    return (
      <div>
        <BalloonConfirm
          onConfirm={() => this.onConfirm(record.key)}
          onCancel={this.onCancel}
          title="真的要删除这条信息吗?"
        >
          <a style={styles.link.delete} >
          删除
          </a>
        </BalloonConfirm>
      </div>
    );
  };
  render() {
    const { isLoading, dataSource } = this.state;
    let stockLength = 0;
    let buyPrice = 0;
    let data = [];
    if (dataSource.length !== 0) {
      if (dataSource[0].children.length !== 0) {
        data = dataSource;
        dataSource.forEach((obj) => {
          obj.children.forEach((item) => {
            buyPrice += (item.buying_price * item.stock);
            stockLength += +item.stock;
          });
        });
      }
    }

    return (
      <div style={styles.container}>
        <PageHead title="采购入库单" />
        <IceContainer>
          <Table loading={isLoading} dataSource={data} hasBorder={false} >
            {console.log(data)}
            <Table.GroupHeader cell={this.groupHeaderRender} style={styles.tHead} />
            <Table.Column title="商品条码" dataIndex="goods_bar_code" width={100} />
            <Table.Column title="品牌" dataIndex="goods_class_name" width={120} />
            <Table.Column title="商品名称" dataIndex="goods_name" width={200} />
            <Table.Column title="型号" dataIndex="model" width={100} />
            <Table.Column title="色号/膜层" dataIndex="color_layer" width={100} />
            <Table.Column title="数量" dataIndex="stock" width={100} />
            <Table.Column title="零售价" dataIndex="retail_price" cell={this.renderCell.bind(this, 'retail_price')} width={100} />
            <Table.Column title="进货价" dataIndex="buying_price" cell={this.renderCell.bind(this, 'buying_price')} width={100} />
            <Table.Column title="镜片类型" dataIndex="lens_type" width={100} />
            <Table.Column title="折射率" dataIndex="refractivity" width={100} />
            <Table.Column title="屈光度" dataIndex="diopter" width={100} />
            <Table.Column title="散光度" dataIndex="astigmatism" width={100} />
            {/* <Table.Column title="折扣" dataIndex="rebate" cell={this.renderCell.bind(this, 'rebate')} width={100} /> */}
            <Table.Column title="生产批号" dataIndex="batch_number" cell={this.renderCell.bind(this, 'batch_number')} width={100} />
            <Table.Column title="到期日期" dataIndex="due_time" cell={this.renderTime.bind(this, 'due_time')} width={150} />
            <Table.Column title="操作" cell={this.renderOper} width={80} />
          </Table>
          <div style={{ fontSize: '16px' }}>
            <span style={{ display: 'inline-block', background: '#FF6E02', padding: '10px', color: '#fff', marginRight: '20px' }}>合计：</span>
            <span style={{ marginRight: '20px' }}>数量：<span style={{ color: '#D95700' }}>{stockLength}</span></span>
            <span style={{ marginRight: '20px' }}>采购总额：<span style={{ color: '#D95700' }}>{buyPrice}</span></span>
          </div>
          <Button type="primary" className="btn-in" onClick={this.props.handlePurInBtn} style={{ marginTop: '20px' }}>入库</Button>
        </IceContainer>

      </div>
    );
  }
}

const styles = {
  container: {
    padding: '0 0px 20px',
  },
  listTitle: {
    textAlign: 'left',
    lineHeight: '40px',
    fontSize: '20px',
    color: '#333333',
    width: '140px',
    height: '40px',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
    edit: {
      color: '#8272EC',
      cursor: 'pointer',
    },
    detail: {
      color: '#5584FF',
      cursor: 'pointer',
    },
    delete: {
      color: '#FF3000',
      cursor: 'pointer',
    },
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'center',
  },
  upload: {
    float: 'right',
    color: '#fff',
    backgroundImage: 'linear-gradient(90deg, #FFA20D 0%, #FF6E02 100%)',
    boxShadow: '0 -2px 6px 0 rgba(255,110,2,0.30)',
    borderRadius: '20px 20px 0 0',
    width: '124px',
    height: '40px',
    cursor: 'pointer',
    border: 'none',
    icon: {
      cursor: 'pointer',
      fontSize: '16px',
      textAlign: 'left',
      lineHeight: '22px',
    },
  },
  tHead: {
    backgroundColor: '#fff !important',
    borderTop: 'none',
    color: '#ff0 !important',
  },
};
